<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <p id="writeData" class="data">Off-Line</p>
    <p id="lastStamp">No Data yet</p>

    <script>
        /*
        // ajxs 实现异步通信：用 Go Live 运行
        const fullData = document.getElementById('writeData');
        const lastData = document.getElementById('lastStamp');

        function fetchData(){
            console.log("fetching update data...");
            let xhr = new XMLHttpRequest();
            xhr.open("GET", "time-log.txt", true);
            xhr.onload = function(){
                updateDisplay(xhr.response);
            }
            xhr.send();
        }

        function updateDisplay(text){
            fullData.textContent = text;

            let timeArray = text.split('\n');
            // include because some file system always include a blank line at the end of text files.
            if(timeArray[timeArray.length - 1] === ''){
                timeArray.pop();
            }
            lastData.textContent = timeArray[timeArray.length - 1];
        }

        //  调用上面已经声明的函数（定时 3 秒后调用） 
        setInterval(fetchData, 3000); 
        */


        // fetch 实现异步通信
        let kok = null;
        fetch("./time-log.txt").then(response => response.text()).then(data => console.log(data));
        fetch("./time-log.json").then(response => response.json()).then(
            (data) =>{
               kok = data;
               console.log(data); 
            }
        ); // json 是一种键值对的数据


    </script>


</body>
</html>